<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Style Guide</title>
    <link rel="stylesheet" type="text/css" href="fitweb.css"/>
    <script type="text/javascript" src="support.js"></script>
    <script type="text/javascript" src="editor.js"></script>
    <style type="text/css">
        .panel {
            margin: 0 20px 20px 0;
            padding: 10px;
            background-color: #e6e6e6;
            width: 300px;
            border: 1px solid #999999;
        }

        .code {
            font-family: monospace;
            background-color: #f0f8ff;
        }
    </style>
</head>
<body>
<h1 class="title" onclick="toggle();">Style Guide</h1>
<table class="pageFixture">
    <tr>
        <td>org.fitweb.fixture.WebFixture</td>
    </tr>
</table>
<h2>Please run this test, so that you can see the styled results</h2>

<p>These are the style conventions I have followed, to make the tests more readable to non-technical people.
    You can see the styles themselves in <span class="code"><a id="link" href="fitweb.css">fitweb.css</a></span>
    If you come up with a different, or better, approach, please send us an example</p>

<div class="panel left">
    <p>Setup elements contain no assertions; they set up data or conditions for the rest of the test.
        They go blue after we run the test (if they pass). Set the table class to "setup", i.e. <span class="code">&lt;table class="setup"&gt;</span></p>

    <p>User-defined names ("Pet's Name" in this case) are emphasised, so that their reoccurences can easily be picked out in the text.
        <span class="code">&lt;td class="name"&gt;Pet's Name&lt;/td&gt;</span></p>
</div>
<table class="setup left">
    <tr>
        <td>define element</td>
        <td class="name">link</td>
        <td>as</td>
        <td>//a[@id='link']</td>
    </tr>
</table>
<div class="clear"></div>
<div class="panel left">
    <p>Data values are italicised, to distinguish them from control statements: <span class="code">&lt;td class="value"&gt;</span></p>
</div>
<table>
    <tr>
        <td>browse</td>
        <td class="value">file://${user.dir}/tests/Style Guide.html</td>
    </tr>
</table>
<div class="clear"></div>
<div class="panel left">
    <p>Similar assertions look better grouped together in the same table</p>
</div>
<table>
    <tr>
        <td>assert</td>
        <td class="name">Title</td>
        <td>contains</td>
        <td class="value">Style Guide</td>
    </tr>
    <tr>
        <td>assert</td>
        <td class="name">link</td>
        <td>does not contain</td>
        <td class="value">Cujo</td>
    </tr>
</table>
<div class="clear"></div>
<div class="panel left">
    <p>Consider displaying tables with similar concerns side-by-side, so the reader has less scrolling to do</p>
    <p>You can even go a bit mad with <span class="code">fieldsets</span>. You may need to maximise your browser window for this to look useful</p>
</div>
<fieldset class="left" style="margin-top: 20px;">
    <legend>Alternative flow one</legend>
    <table class="setup">
        <tr>
            <td>define element</td>
            <td class="name">link</td>
            <td>as</td>
            <td>//a[@href='fitweb.css']</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>assert</td>
            <td class="name">link</td>
            <td>contains</td>
            <td class="value">fitweb.css</td>
        </tr>
    </table>
    <table class="setup">
        <tr>
            <td colspan="2">set request headers</td>
        </tr>
        <tr class="setup">
            <td class="name">name</td>
            <td class="name">value</td>
        </tr>
        <tr>
            <td>User-Agent</td>
            <td>Nasty little IE browser</td>
        </tr>
        <tr>
            <td>Accept-Encoding</td>
            <td>gzip,deflate</td>
        </tr>
    </table>
</fieldset>
<fieldset class="left" style="margin-top: 20px;">
    <legend>Alternative flow two</legend>
    <table class="setup">
        <tr>
            <td>define element</td>
            <td class="name">another link</td>
            <td>as</td>
            <td>//a[@href='fitweb.css']</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>assert</td>
            <td class="name">another link</td>
            <td>contains</td>
            <td class="value">fitweb.css</td>
        </tr>
    </table>
    <table class="setup">
        <tr>
            <td colspan="2">set request headers</td>
        </tr>
        <tr class="setup">
            <td class="name">name</td>
            <td class="name">value</td>
        </tr>
        <tr>
            <td>User-Agent</td>
            <td>Nasty little IE browser</td>
        </tr>
        <tr>
            <td>Accept-Encoding</td>
            <td>gzip,deflate</td>
        </tr>
    </table>
</fieldset>
<div style="clear: both"></div>

<table style="margin-top: 20px">
    <tr>
        <td class="name" colspan="2">summary</td>
    </tr>
</table>
</body>
</html>